<template>
    <div class="yubao">
        <h6>逐小时预报</h6>
         <div class="hour">
    <template v-for="item in hourList" >
             <div class="hours"><div>{{ item.temperature }}°</div> <div>{{ item.text }}</div><div>{{ item.time}}</div> </div>   
    </template>
  </div>
    </div>
 
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { hourTempQuery } from '../../service/cityService'
let hourList: any = ref([])
let id=ref("");
let name=ref("");
let aa=localStorage.getItem('city');
if(aa?.length){
  id.value=JSON.parse(aa).id;
name.value=JSON.parse(aa).name;
}

let TempQuery = async () => {
  let { data } = await hourTempQuery({
    key: 'S_kv1Ro8FrmQ4UeD9',
    location: name.value,
    language: 'zh-Hans',
    unit: 'c',
    start: 0,
    hours: 24
  })
  hourList.value = data.results[0].hourly;
  
  for(var i=0;i<hourList.value.length;i++){
    hourList.value[i].time=hourList.value[i].time.slice(11,16)
  }
}

onMounted(async () => {
  await TempQuery() 
})
</script>
<style scoped lang="scss">
.yubao{
     box-sizing: border-box;
     margin-top: 10px;
     background: #fff;
      padding: 10px;
      h6{
        margin-bottom: 10px;
      }
}
.hour{
   
    display: flex;
    overflow: hidden;
    overflow-x: scroll;
    text-align: center;
    color: rgb(75, 73, 73);
    font-size: 13px;
    .hours{
        box-sizing: border-box;
        margin-right: 20px;
    }
}
</style>
